<!--  -->
<template>
  <div id="map" class="map" ref="rootmap"></div>
</template>

<script>
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import mapconfig from '../config/mapconfig'
import clusterTag from '@/util/clusterTag'
import loadWMS from '@/util/loadWMS'
import draw from '@/util/draw'
import loadWMTS from '@/util/loadWMTS'
import pbfControl from '@/util/pbfControl'
export default {
  data () {
    return {
        map: null
    };
  },

  components: {},

  computed: {},

  mounted() {
      var mapContainer = this.$refs.rootmap;
    //   var center = fromLonLat([mapconfig.x, mapconfig.y]);
      this.map = new Map({
          target: mapContainer,
          layers: mapconfig.streetmap(),
          view: new View({
              projection: 'EPSG:4326',
              center: [mapconfig.x, mapconfig.y],
              zoom: mapconfig.zoom,
              minZoom: mapconfig.minZoom,
              maxZoom: mapconfig.maxZoom,
              //1.设置缩放级别为整数 
              constrainResolution: true, 
              //2.关闭无级缩放地图
              smoothResolutionConstraint: false,
          })
      });
      // this.map.addLayer(mapconfig.layer4490())

      // 聚合加载
      // clusterTag.addCluster(this.map); 
      // var view = this.map.getView();
      // console.log(clusterTag);
      // view.setZoom(4);
      // view.animate({
      //   center: [clusterTag.x, clusterTag.y],
      //   duration: 0
      // })

      // 加载WMS
      // this.map.addLayer(loadWMS.tileLayer);

      // 绘制多边形，线段
      // this.map.addLayer(draw.vector)
      // this.map.addInteraction(draw.drawClassLineString)

      // 加载WMTS
      // this.map.addLayer(loadWMTS.tileLayer);

      // 加载pbf
      pbfControl.loadPBF(this.map);
  },

  methods: {}
}

</script>
<style scoped>
body,
#app {
  margin: 0;
  padding: 0;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
/*隐藏ol的一些自带元素*/
.ol-attribution,.ol-zoom { display: none;}
</style>